<template>
  <div>
    <div class="h">头部</div>
    <!-- 去哪里 -->
    // 这边显示的名字是router里面配置的名称（后续只需要改变路由的路径就好了）
    <router-link :to="{name:'music'}">进入音乐</router-link>
    <router-link :to="{name:'movie'}">进入电影</router-link>
    <router-link :to="{name:'music'}">进入音乐</router-link>

    // 也可以根路径使用
    <router-link to="/movie">进入电影</router-link>

    <!-- 留坑，用来填充的 -->
    <!-- <router-view class="b"></router-view> -->
    <div class="f">底部</div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  components: {

  },
  methods: {

  }
}
</script>

<style scoped>
.h {
  height: 100px;
  background-color: red;
}
.b {
  height: 100px;
  background-color: pink;
}
.f {
  height: 100px;
  background-color: green;
}
</style>
